<template>
  <div v-if="visible" :style="{ left: left + 'px', top: top + 'px' }" class="context-menu">
    <div class="menu">
      <!-- 刷新 -->
      <div v-if="node.filetype === 'zwjj' || node.filetype === 'cd'" class="menu-item" @click="handleClick('jinru', true)">
        <i class="el-icon-right" style="color: #0A6ED6;font-weight: 900"></i> 进入
      </div>
      <!-- 编辑 -->
      <div v-if="node.filetype === '.txt'" class="menu-item" @click="handleClick('bianji', true)">
        <i class="el-icon-edit" style="color: #0A6ED6;font-weight: 900"></i> 编辑
      </div>
      <!-- 编辑 -->
      <div v-if="node.filetype === '.pdf'" class="menu-item" @click="handleClick('queryPdf', true)">
        <i class="el-icon-view" style="color: #0A6ED6;font-weight: 900"></i> 查看
      </div>
      <div v-if="(node.filetype === 'zwjj' || node.filetype === 'cd') || node.filetype === '.txt' || node.filetype === '.pdf'" class="fgx"></div>
      <!-- 下载 -->
      <div :class="(node.readonly === 'false' && node.filepath !== null) ? 'menu-item' : 'menu-item-readonly'" @click="handleClick('xiazai', false)">
        <i class="el-icon-bottom menu-item-icon" style="color: #0A6ED6;font-weight: 900"></i> 下载
      </div>
      <!-- 复制 -->
      <div :class="node.readonly === 'false' ? 'menu-item' : 'menu-item-readonly'" @click="handleClick('fuzhi', false)">
        <i class="el-icon-document-copy menu-item-icon" style="color: #6FAFF4"></i>
        复制
      </div>
      <!-- 剪切 -->
      <div :class="node.readonly === 'false' ? 'menu-item' : 'menu-item-readonly'" @click="handleClick('jianqie', false)">
        <i class="el-icon-scissors menu-item-icon" style="color: #606266"></i>
        剪切
      </div>
      <!-- 重命名 -->
      <div :class="node.readonly === 'false' ? 'menu-item' : 'menu-item-readonly'" @click="handleClick('chongmingming', false)">
        <i class="el-icon-edit-outline menu-item-icon" style="color: #909399"></i>
        重命名
      </div>
      <!-- 删除 -->
      <div :class="node.readonly === 'false' ? 'menu-item' : 'menu-item-readonly'" @click="handleClick('shanchu', false)">
        <i class="el-icon-close menu-item-icon" style="color: #cc4649;font-weight: 900"></i>
        删除
      </div>
      <div class="fgx"></div>
      <!-- 属性 -->
      <div class="menu-item" @click="handleClick('shuxing', true)">
        <i class="el-icon-warning-outline menu-item-icon" style="color: #6FAFF4"></i>属性
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      left: 0,
      top: 0,
      node: {},
      option: '',
      cklx: 'table',
      ckList: [{"name":"图标排列","type":"list"},{"name":"列表排列","type":"table"}],
      pxlx: 'mc',
      pxList1: [{"name":"名称","type":"mc"},{"name":"类型","type":"lx"},{"name":"大小","type":"dx"},{"name":"修改时间","type":"xgsj"}],
      pxlx2: 'dz',
      pxList2: [{"name":"递增","type":"dz"},{"name":"递减","type":"dj"}],
    };
  },
  methods: {
    show(event, currentTree) {
      this.visible = true;
      this.left = event.clientX;
      this.top = event.clientY;
      this.node = currentTree
      document.addEventListener('click', this.close);
    },
    close() {
      this.visible = false;
      document.removeEventListener('click', this.close);
    },
    handleClick(action, check) {
      // 如果当前不是只读，则可以进行修改
      if (check) {
        this.$emit('handleClick', action, this.node);
        this.close();
      }else {
        if (this.node.readonly === 'false') {
          if (action === 'xiazai' && this.node.filepath !== null) {
            this.$emit('handleClick', action, this.node);
            this.close();
          }
          if (action !== 'xiazai') {
            this.$emit('handleClick', action, this.node);
            this.close();
          }
        }
      }
    },
    changeItem(item) {
      this.option = item
    },
    changeCk(item, type) {
      this.$set(this, type, item.type)
    }
  },
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 5px 2px;
  list-style: none;
}
.menu {
  width: 200px;
  height: 100%;
  padding: 0px 5px;
}
.menu-item {
  width: 100%;
  height: 25px;
  padding-left: 4px;
  line-height: 25px;
  font-size: 12px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #F2F2F2;
  border-radius: 4px;
}
.menu-item-icon {
  margin-right: 2px;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
}
.menu-item-readonly {
  width: 100%;
  height: 25px;
  padding-left: 4px;
  line-height: 25px;
  font-size: 12px;
  opacity: 0.5;
  cursor: not-allowed;
}
.fgx {
  border: 0.1px solid #EBEEF5;
  margin: 4px 0px;
  border-radius: 2px
}
.context-option {
  margin-left: 190px;
  width: 200px;
  padding: 5px;
}
</style>
